<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- 没有防抖的input  -->
         防抖后的input
        <input 
            type="text" 
            id="unDebounce" 
            placeholder="请输入您要搜索的用户名"
        >
    </div>
    <script>
    // 不加防抖的
    const inputa = document.getElementById('unDebounce');
    const inputb = document.getElementById('debounce');
    function handleNameSearch(e) {
        const value = e.target.value;
        fetch('http://localhost:3000/users')
            .then(res => res.json())
            .then(data => {// console.log(data)
                 const users = data;
                 // 数组上es6的新方法， map 转换， filter 过滤
                 // callback 
                 const filterUsers = users.filter(user => {
                     // console.log(user);
                     // 字符串中新方法 
                     // 可读性更好 es6 字符串新增方法
                     return user.name.includes(value)
                       //return user.name.indexOf(value) !== -1
                     // if (user.name)
                 })
                console.log(filterUsers)
    })
    }
    // 闭包功能函数
    function debounce(func,  delay) {
        //返回值必须得是函数 keyup 事件处理函数
        return function(args){
            clearTimeout(func.id)
            // 函数是对象 id挂在func上 func 是闭包中的自由变量
            func.id = setTimeout(function(){
                func(args)
            },delay)    
        }

    }
    const debounceNameSearch = debounce(handleNameSearch, 500)   

    inputa.addEventListener('keyup', handleNameSearch) 
    inputb.addEventListener('keyup', debounceNameSearch) 
    // inputa.addEventListener('keyup', function(e) {
    //     // console.log(e.target.value)
    //     const value = e.target.value;
    //     fetch('http://localhost:3000/users')
    //         .then(res => res.json())
    //         .then(data => {
    //             // console.log(data)
    //             const users = data;
    //             // 数组上es6的新方法， map 转换， filter 过滤
    //             // callback 
    //             const filterUsers = users.filter(user => {
    //                 // console.log(user);
    //                 // 字符串中新方法 
    //                 // 可读性更好 es6 字符串新增方法
    //                 return user.name.includes(value)
    //                  //return user.name.indexOf(value) !== -1
    //                 // if (user.name)
    //             })
    //             // console.log(filterUsers)

    //         })
    // })

    </script>
</body>
</html>